import QtQuick 2.0

Rectangle {
    id: root;

    gradient: Gradient {
        GradientStop { position: 0.0; color: "#dbddde" }
        GradientStop { position: 1.0; color: "#5fc9f8" }
    }

    ListModel {
        id: listModel;

        ListElement { number: 0 }
        ListElement { number: 1 }
        ListElement { number: 2 }
        ListElement { number: 3 }
        ListElement { number: 4 }
        ListElement { number: 5 }
        ListElement { number: 6 }
        ListElement { number: 7 }
        ListElement { number: 8 }
        ListElement { number: 9 }
    }

    ListView {
        id: listView;
        width: 200;
        anchors.left: parent.left;
        anchors.top: parent.top;
        anchors.leftMargin: 20;
        anchors.bottom: parent.bottom;
        clip: true;
        focus: true;
        spacing: 5;
        currentIndex: 0;

        model: listModel;
        delegate: numberComponent;
        highlight: highComponent;
        highlightFollowsCurrentItem: false;
        header: hreaderComp;
        footer: footerComp;
    }


    //代理组件
    Component {
        id: numberComponent;

        Rectangle {
            id: wapper;

            width: ListView.view.width;
            height: 40;

            gradient: Gradient {
                GradientStop { position: 0.0; color: "#f8306a" }
                GradientStop { position: 1.0; color: "#fb5b40" }
            }

            Text {
                anchors.centerIn: parent;
                text: number;
                font.pointSize: 10;
            }

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    listView.currentIndex = index;
//                    if (!wapper.ListView.delayRemove)
//                        listModel.remove(index);
                }
            }

            ListView.onAdd: SequentialAnimation {
                NumberAnimation { target: wapper; property: "scale"; from: 0;
                    to: 1; duration: 200; easing.type: Easing.InOutQuad; }
            }

            ListView.onRemove: SequentialAnimation {
                PropertyAction { target: wapper; property: "ListView.delayRemove";
                    value: true; }
                NumberAnimation { target: wapper; property: "scale";
                    to: 0; duration: 250; easing.type: Easing.InOutQuad; }
                PropertyAction { target: wapper; property: "ListView.delayRemove";
                    value: false; }
            }
        }
    }

    //高亮组件
    Component {
        id: highComponent;

        Item {
            width: ListView.view.width;
            height: ListView.view.currentItem.height;
            y: ListView.view.currentItem.y;

            Behavior on y {
                SequentialAnimation {
                    PropertyAnimation { target: rect; property: "opacity"; to: 0;
                        duration: 200;
                    }
                    NumberAnimation { duration: 1; }
                    PropertyAnimation { target: rect; property: "opacity"; to: 1;
                        duration: 200;
                    }
                }
            }

            Rectangle {
                id: rect;
                anchors.fill: parent;
                color: "#53d769";
            }
        }
    }

    //页眉
    Component {
        id: hreaderComp;

        Rectangle {
            width: ListView.view.width;
            height: 40;
            color: "yellow";

            Text {
                anchors.centerIn: parent;
                font.pointSize: 10;
                text: qsTr("header");
            }

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    listModel.append({"number": listModel.count});
                }
            }
        }
    }

    //页脚
    Component {
        id: footerComp;

        Rectangle {
            width: ListView.view.width;
            height: 40;
            color: "red";

            Text {
                anchors.centerIn: parent;
                font.pointSize: 10;
                text: qsTr("footer");
            }

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    if (!listView.delayRemove) {
                        var index = listModel.count - 1;
                        if (index >= 0)
                            listModel.remove(index);
                    }
                }
            }
        }
    }
}
